<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>实时摇一摇</title>
    <link href="css/main.css" rel="stylesheet">
</head>
<style>
    body{
        background: #B3032A url("ssyiy/yiy-bg.jpg") no-repeat center top;
    }
    .w {
        width: 1080px;
        margin: 0 auto;
        position: relative;
    }
    .logo {
        position: absolute;
        right: 0;
        top:0;
    }
    .content{
        padding-top: 447px;
        background:url("ssyiy/yiy-hd.png") no-repeat center top;
        position: relative;
    }
    .list{
        background-color: #8E0121;
        padding: 30px 100px;
        border-radius: 6px;
        position: relative;
    }
    .list .hd{
        margin-bottom: 10px;
    }
    .list .bd{
        margin-bottom: 10px;
        counter-reset:sectioncounter;
    }
    .list .hd li,
    .list .bd li p{
        float: left;
        height: 36px;
        line-height: 36px;
        font-size: 24px;
        color: #fff;
        width: 200px;
    }
    .list .bd li{
        height: 36px;

    }
    .list .hd li:nth-child(1){
        width: 60px;
        margin-right: 140px;
        text-align: center;
    }
    .list .bd li p:nth-child(1),
    .list .hd li:nth-child(2){
        width: 480px;
    }

    .list .bd li:nth-child(1){

    }
    .list .bd li:before{
        content: counter(sectioncounter);
        counter-increment: sectioncounter;
        display: block;
        float: left;
        font-size: 24px;
        color: #fff;
        width: 60px;
        margin-right: 140px;
        height: 36px;
        line-height:36px;
        text-align: center;
    }
    .list .bd li:nth-child(1):before{
        content:"";
        background: url("ssyiy/jp-01.png") no-repeat center;
        background-size: contain;
    }
    .list .bd li:nth-child(2):before{
        content:"";
        background: url("ssyiy/jp-02.png") no-repeat center;
        background-size: contain;
    }
    .list .bd li:nth-child(3):before{
        content:"";
        background: url("ssyiy/jp-03.png") no-repeat center;
        background-size: contain;
    }
    .lp-01 {
        position: absolute;
        width: 180px;
        right: -50px;
        bottom: -25px;
    }
    .lp-02 {
        position: absolute;
        left: -83px;
        top: -37px;
        width: 150px;
    }
</style>
<body>
    <div class="w content">
            <img class="logo" src="ssyiy/yiy-logo.png">
            <div class="list ">
                <img src="ssyiy/lp-01.png" class="lp-01">
                <img src="ssyiy/lp-02.png" class="lp-02">
                    <ul class="hd clearfix">
                       <li>名次</li>
                       <li>用户</li>
                       <li>次数</li>
                    </ul>
                    <ul class="bd clearfix">
                        <li>
                            <p>186****1233</p>
                            <p>300</p>
                        </li>
                        <li>
                            <p>186****1233</p>
                            <p>300</p>
                        </li>
                        <li>
                            <p>186****1233</p>
                            <p>300</p>
                        </li>
                        <li>
                            <p>186****1233</p>
                            <p>300</p>
                        </li>
                        <li>
                            <p>186****1233</p>
                            <p>300</p>
                        </li>
                        <li>
                            <p>186****1233</p>
                            <p>300</p>
                        </li>
                        <li>
                            <p>186****1233</p>
                            <p>300</p>
                        </li>
                        <li>
                            <p>186****1233</p>
                            <p>300</p>
                        </li>
                        <li>
                            <p>186****1233</p>
                            <p>300</p>
                        </li>
                        <li>
                            <p>186****1233</p>
                            <p>300</p>
                        </li>
                    </ul>
            </div>

    </div>

</body>
</html>